<template>
  <div class="homeContainer">
    <!-- 头部 -->
    <div class="homeHeader">
      <!-- 头部搜索框内容 -->
      <div class="search">
        <!-- 搜索框严选图片 -->
        <div class="searchBck"></div>
        <!-- 搜索框中间搜索部分 -->
        <div class="searchBox">
          <div  @click="toSearch" class="serachCenter">
            <van-icon name="search" class="scIcon" />
            <span class="detailDes">
              搜索商品, 共226469款好物
            </span>
          </div>
        </div>
        <!-- 搜索框登录按钮 -->
        <van-button to="/login" class="btnLogin" plain type="primary">登录</van-button>
      </div>
      <!-- 头部推荐等导航 -->
      <div class="recommend">
        <!-- 头部导航滚动 -->
        <van-tabs class="rcVT" :sticky="true" @change="beforeChange" use-before-change v-model:active="tName" v-if="!openL">
          <!--默认选中第一个-->
          <van-tab title="推荐" class="firstTab" name="0">
            <!-- 图片轮播图 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="(item, index) in focusList" :key="index">
                <van-image :src="item.picUrl"></van-image>
              </van-swipe-item>
            </van-swipe>
            <!-- 小导航 -->
            <div class="g-grow">
              <ul class="ggUl">
                <li class="ggUlItem" v-for="(item, index) in PolicyDescList" :key="index">
                  <van-image class="gguiImg" :src="item.icon"></van-image>
                  <div class="gguiText">{{ item.desc }}</div>
                </li>
              </ul>
            </div>
            <!-- 商品大类 -->
            <div class="goodKinds">
              <ul class="gkContainer">
                <li class="gkcItem" @click="toCategory()" v-for="(item, index) in kingKongList" :key="index">
                  <van-image class="gkcImg" :src="item.picUrl"></van-image>
                  <div class="gkcText">{{ item.text }}</div>
                </li>
              </ul>
            </div>
            <!-- 活动图片-->
            <div class="activities">
              <van-image class="actImg" :src="db11" alt=""></van-image>
            </div>
            <!-- 新人部分 -->
            <div class="newPresent">
              <!-- 分割线 -->
              <van-divider class="divider" :style="{ color: 'black', borderColor: 'black', padding: '0 95px' }">
                新人专享礼
              </van-divider>
              <div class="npContaint">
                <div class="npcLeft">
                  <div class="npclText">新人专享礼包</div>
                  <div class="npcBottom">
                    <div class="imgWrap">
                      <van-image class="iwImg" src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" alt=""></van-image>
                      <div class="toRight">>>></div>
                    </div>
                  </div>
                </div>
                <div class="npcRight">
                  <div class="nrItem nFirst">
                    <div class="ntiImg">
                      <div class="ntii">
                        <van-image class="miniImg" :src="growList1.picUrl"></van-image>
                        <div class="pCircle">
                          <div class="nowPrice">{{ growList1.activityPrice }}</div>
                          <div class="prePrice">{{ growList1.originPrice }}</div>
                        </div>
                      </div>

                    </div>
                    <div class="ntiText">
                      <div class="ntiTitle">{{ growList1.subTitle }}</div>
                      <div class="ntiDes">{{ growList1.title }}</div>
                    </div>
                  </div>
                  <div class="nrItem nSecond">
                    <div class="ntiImg">
                      <div class="ntii">
                        <van-image class="miniImg" :src="growList2.showPicUrl"></van-image>
                        <div class="pCircle">
                          <div class="nowPrice">{{ growList2.activityPrice }}</div>
                          <div class="prePrice">{{ growList2.originPrice }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="ntiText">
                      <div class="ntiTitle">{{ growList2.title }}</div>
                      <div class="ntipost">{{ growList2.tag }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 类目热销榜 -->
            <div class="placard">
              <div class="pcTitle">
                {{ leiMu }}
              </div>
              <div class="plGoods">
                <div class="line1">
                  <div class="line1Item left">
                    <div class="liName">
                      {{ hotTop1.categoryName }}
                    </div>
                    <div class="liLine"></div>
                    <div class="liImg">
                      <van-image class="liiPic" :src="hotTop1.picUrl"></van-image>
                    </div>
                  </div>
                  <div class="line1Item right">
                    <div class="liName">
                      {{ hotTop2.categoryName }}
                    </div>
                    <div class="liLine"></div>
                    <div class="liImg">
                      <van-image class="liiPic" :src="hotTop2.picUrl"></van-image>
                    </div>
                  </div>
                </div>
                <div class="line2">
                  <div class="line2Item" v-for="(item, index) in cateSecondList" :key="index">
                    <div class="title">{{ item.categoryName }}</div>
                    <div class="img">
                      <van-image class="pic" :src="item.picUrl" alt=""></van-image>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            <!-- 为你精选 -->
            <div class="m-favoriteListModule">
              <!-- 板块名称 -->
              <!-- 商品详情 -->
              <div class="goodsList">
                <div class="title">
                  为你精选
                </div>
                <ul class="goods">
                  <li class="goodsItem" @click="toDetail" v-for="(item, index) in dddDeatailList" :key="index">
                    <!-- 商品图片 -->
                    <div class="goodsImg">
                      <img class="goodsPic" :src="item.listPicUrl" alt="">
                    </div>

                    <!-- 商品名称 -->
                    <div class="goodsName">
                      <img class="nameImg" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt="">
                      {{ item.name }}
                      <!-- <span class="nameText"></span> -->
                    </div>
                    <!-- 商品价格 -->
                    <div class="goodsPrice">
                      <span class="PriceImg">￥</span>
                      <span class="Price">{{ item.finalPriceInfoVO.priceInfo.basicPrice }}</span>
                      <div class="PriceOutAll" v-if="item.finalPriceInfoVO.priceInfo.counterPrice">
                        <span class="PriceOut">￥</span>
                        <span class="PriceOut">{{ item.finalPriceInfoVO.priceInfo.counterPrice }}</span>
                      </div>
                    </div>
                    <!-- 特价 -->
                    <div class="SaleList">
                      <div class="SaleItem" v-if="!(item.finalPriceInfoVO.banner || {}).title || (item.finalPriceInfoVO.banner || {}).content">
                        <div class="siContent" v-if="(item.finalPriceInfoVO.banner || {}).title">
                          <div class="SaleName">{{ item.finalPriceInfoVO.banner.title }}</div>
                          <div class="SiText">{{ item.finalPriceInfoVO.banner.content }}</div>
                        </div>
                        <div class="slBox" v-if="!(item.finalPriceInfoVO.banner || {}).title && (item.finalPriceInfoVO.banner || {}).content">
                          <div class="SaleText">满99减30</div>
                        </div>

                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </van-tab>

          <van-tab class="every" v-for="(item) in navList" :key="item.categoryId" :title="item.categoryName" :name="item.categoryId">
            <div class="headPic" v-if="cardHPic">
              <van-image class="headImg" :src="cardHPic" alt=""></van-image>
            </div>
            <ul class="goodsDepart">
              <div class="gdItem" v-for="(item, index) in cardList" :key="index">
                <div class="gdiTitle">
                  <div class="Bigtitle">{{ item.category.frontName }}</div>
                  <div class="littleTitle">{{ item.category.name }}</div>
                </div>
                <div class="goodsContant">
                  <ul class="goods">
                    <li class="goodsItem" @click="toDetail" v-for="(smallItem) in item.itemList" :key="smallItem.id">
                      <!-- 商品图片 -->
                      <div class="goodsImg">
                        <img class="goodsPic" :src="smallItem.listPicUrl" alt="">
                      </div>

                      <!-- 商品名称 -->
                      <div class="goodsName">
                        <img class="nameImg" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt="">
                        {{ smallItem.name }}
                      </div>
                      <!-- 商品价格 -->
                      <div class="goodsPrice">
                        <span class="PriceImg">￥</span>
                        <span class="Price">{{ (smallItem.finalPriceInfoVO.priceInfo.finalPrice || '').price }}</span>
                        <div class="PriceOutAll">
                          <span class="PriceOut">￥</span>
                          <span class="PriceOut">{{ smallItem.finalPriceInfoVO.priceInfo.counterPrice }}</span>
                        </div>
                      </div>
                      <!-- 特价 -->
                      <div class="SaleList">
                        <div class="SaleItem" v-if="(smallItem.finalPriceInfoVO.banner || {}) || (smallItem.finalPriceInfoVO.banner || {}).content">
                          <div class="siContent" v-if="(smallItem.finalPriceInfoVO.banner || {}).title">
                            <div class="SaleName">{{ smallItem.finalPriceInfoVO.banner.title }}</div>
                            <div class="SiText">{{ smallItem.finalPriceInfoVO.banner.content }}</div>
                          </div>
                          <div class="slBox" v-if="!(smallItem.finalPriceInfoVO.banner || {}).title && (smallItem.finalPriceInfoVO.banner || {}).content">
                            <div class="SaleText">满99减30</div>
                          </div>

                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </ul>
          </van-tab>
        </van-tabs>
        <!-- 折叠框 板块 -->
        <div class="updownIcont">
          <!-- <div class="allKinds" v-if="openL">全部分类</div> -->
          <van-icon name="arrow-down" color="#aaa" @click="changeOpenL" />
        </div>
        <div class="updownList" v-if="openL">
          <ul class="udList" v-if="tName == 0">
            <li class="first" @click="changCard(0)">
              <button class="first btnActive" size="small">推荐</button>
            </li>
            <li class="moreKind" v-for="(item) in defaultBtnList" :key="item.id" @click="changCard(item.id)">
              <button size="small">{{ item.name }}</button>
            </li>
          </ul>
          <ul class="udList" v-if="tName != 0">
            <li class="first" @click="changCard(0)">
              <button class="first btnActive" size="small">推荐</button>
            </li>
            <li class="moreKind" v-for="(item) in cardBtnList" :key="item.id" @click="changCard(item.id)">
              <button size="small">{{ item.name }}</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <van-back-top class="custom" right="5vw" bottom="10vh">
      <van-icon name="arrow-up" />
    </van-back-top>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getMainData, getTopCategoryList, getdddDetials } from '../../api/home';
import { useRouter } from 'vue-router';

const openL = ref<boolean>(false)
const categoryList = ref<any>([])
const cateSecondList = ref<any>([])
const PolicyDescList = ref<any>([])
const kingKongList = ref<any>([])
const growList1 = ref<any>([])
const growList2 = ref<any>([])
const leiMu = ref<any>('')
const db11 = ref<any>('')
const focusList = ref<any>('')
const dddDeatailList = ref<any>([])
const navList = ref<any>([])
const hotTop1 = ref<any>({})
const hotTop2 = ref<any>({})
const tName = ref<any>(0)
const cardList = ref<any>([])
const cardHPic = ref<string>('')
// 
const cardBtnList = ref<any>([])
const defaultBtnList = ref<any>([])

// const openList=ref<any>([])

const router = useRouter()


const toDetail = () => {
  router.push('/detail')
}

const toSearch = () => {
  router.push('/search')
}

const toCategory = () => {
  router.push('/category')
  
}

const beforeChange = async (beforeChange: any) => {
  // console.log(beforeChange,oldActivename)
  tName.value = beforeChange;
  if (beforeChange == 0) return;
  const res = await getTopCategoryList(beforeChange);
  // console.log(res)
  cardList.value = res.data.categoryItemList.slice(0, 5);
  cardHPic.value = (res.data.currentCategory.bannerList[0] || {}).picUrl

}

const changeOpenL = async () => {
  openL.value = !openL.value
  try {
    if (tName.value == 0) {
      return
    } else {
      console.log(111)
      const res = await getTopCategoryList(tName.value)
      // console.log(res)

      cardBtnList.value = res.global.cateList.map((item: any) => {
        return {
          name: item.name,
          id: item.id
        }
      })
    }
  } catch (err) {
    // console.log(err)
  }


}

const changCard = async(id: number) => {
  openL.value = !openL.value
  tName.value = id
  console.log(tName.value.toString())
  if(tName.value==0)return
  try {
    const res = await getTopCategoryList(id);
    cardList.value = res.data.categoryItemList.slice(0, 5);
    cardHPic.value = (res.data.currentCategory.bannerList[0] || {}).picUrl
  } catch (err) {
    // console.log(err)
  }
}

onMounted(async () => {
  try {
    // 推荐
    const { data } = await getMainData()
    // console.log(data)
    // 轮播图下方数据 三小块
    PolicyDescList.value = data.data.policyDescList
    // 宫格数据
    kingKongList.value = data.data.kingKongModule.kingKongList
    // 新人活动数据
    growList1.value = data.data.indexActivityModule[0]
    growList2.value = data.data.indexActivityModule[1]
    // 
    categoryList.value = data.data.categoryHotSellModule.categoryList

    // tab标签栏数据
    navList.value = data.data.categoryHotSellModule.categoryList.map((item: any) => {
      return {
        categoryName: item.extra.operationResource.categoryName,
        categoryId: item.extra.operationResource.categoryId
      }
    })

    // 
    defaultBtnList.value = data.data.categoryHotSellModule.categoryList.map((item: any) => {
      return {
        name: item.extra.operationResource.categoryName,
        id: item.extra.operationResource.categoryId
      }
    })

    // 类目热销上半部分
    hotTop1.value = data.data.categoryHotSellModule.categoryList[0]
    hotTop2.value = data.data.categoryHotSellModule.categoryList[1]
    // 类目热销下半部分
    cateSecondList.value = (data.data.categoryHotSellModule.categoryList).splice(2, data.data.categoryHotSellModule.categoryList.length)
    // 类目名称
    leiMu.value = data.data.categoryHotSellModule.title
    // 活动图片
    db11.value = data.data.bigPromotionModule.floorList[0].cells[0].picUrl
    // 轮播图图片
    focusList.value = data.data.focusList
    // 为你推荐商品数据
    dddDeatailList.value = (await getdddDetials()).data.itemList
    // console.log(navList.value)


    // card 数据






  } catch (err) {
    // console.log(false)
  }
})
</script>

<script lang="ts">
export default {
  name: 'Home'
}
</script>

<style lang="scss" scoped>
.homeContainer {
  height: 100%;

  .homeHeader {
    height: 74px;
    margin-bottom: .6px;

    .search {
      height: 44px;
      padding: 8px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .searchBck {
        width: 69px;
        height: 20px;
        margin-right: 10px;
        background-image: url('../../static/images/logo.png');
        background-repeat: no-repeat;
        background-clip: content-box;
        background-size: contain;
      }

      .searchBox {
        height: 28px;
        line-height: 28px;
        width: 221px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e6e4e4;
        border-radius: 5px;

        .serachCenter {
          height: 28px;
          line-height: 28px;
          font-size: 14px;

          .scIcon {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }
      }

      .btnLogin {
        height: 20px;
        width: 37px;
        font-size: 14px;
        padding: 0;
        margin-left: 8px;
        color: red;
        border-color: red;
        ;
      }
    }

    .recommend {
      position: relative;
      height: 30px;
      line-height: 30px;

      .rcVT {
        .firstTab {
          .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            height: 148px;
            text-align: center;
          }

          .g-grow {
            height: 36px;
            padding: 0 15px;

            .ggUl {
              display: flex;
              justify-content: space-around;
              align-items: center;

              .ggUlItem {
                height: 21px;
                display: flex;
                align-items: center;

                .gguiImg {
                  width: 15px;
                  height: 15px;
                }

                .gguiText {
                  height: 16px;
                  line-height: 16px;
                  margin-left: 8px;
                  font-size: 12px
                }
              }
            }
          }

          .goodKinds {
            height: 176px;

            .gkContainer {
              display: flex;
              flex-wrap: wrap;
              height: 100%;
              width: 100%;

              .gkcItem {
                display: flex;
                width: 55px;
                margin: 5px 10px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .gkcImg {
                  width: 55px;
                  height: 55px;
                }

                .gkcText {
                  height: 18px;
                  line-height: 18px;
                  margin-top: 5px;
                  text-align: center;
                  font-size: 12px;
                }
              }
            }
          }

          .activities {
            height: 40px;
            text-align: center;

            .actImg {
              height: 40px;
              width: 100%;
            }
          }

          .newPresent {
            height: 279px;

            .divider {
              margin: 10px 0;
              padding-bottom: 15px;
              height: 45px;
              margin: 0 15px;
              color: black;
              font-size: 16px;
            }

            .npContaint {
              height: 219px;
              padding-left: 15px;
              display: flex;

              .npcLeft {
                width: 170px;
                height: 217px;
                background-color: #f9e9cf;
                margin-right: 5px;

                .npclText {
                  height: 39px;
                  font-size: 16px;
                  padding: 15px 0 0 15px;
                  box-sizing: border-box;

                }

                .npcBottom {
                  height: 128.5px;
                  margin: 18.5px 21.25px;
                  position: relative;

                  .imgWrap {
                    height: 128.5px;

                    .iwImg {
                      display: inline-block;
                      width: 129px;
                      height: 128.5px;
                    }

                    .toRight {
                      width: 15px;
                      height: 20px;
                      position: absolute;
                      top: 109.5px;
                      right: 32.5px;
                    }
                  }
                }
              }

              .npcRight {
                width: 171.5px;
                display: flex;
                flex-direction: column;

                .nFirst {
                  background-color: #fbe2d3;
                }

                .nSecond {
                  background-color: #ffecc2;
                }

                .nrItem {
                  width: 170px;
                  height: 107.5px;
                  padding: 10px 0 0 15px;
                  margin: 0 2px 2px 0;
                  position: relative;
                  box-sizing: border-box;

                  .ntiImg {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    top: 7.5px;
                    left: 71.5px;

                    .ntii {
                      position: relative;

                      .miniImg {
                        width: 100px;
                        height: 100px;
                        position: absolute;
                        top: 0;
                        left: 0;
                      }

                      .pCircle {
                        width: 40px;
                        height: 40px;
                        background-color: rgb(246, 164, 71, .8);
                        display: flex;
                        flex-direction: column;
                        color: #fff;
                        border-radius: 50%;
                        position: absolute;
                        top: 0;
                        right: 15px;
                        // bottom:-44.9px;
                        padding-top: 5px;
                        box-sizing: border-box;

                        .nowPrice {
                          width: 40px;
                          height: 18px;
                          line-height: 18px;
                          text-align: center;
                          font-size: 12px;
                        }

                        .prePrice {
                          margin-top: -3.5px;
                          height: 15px;
                          line-height: 15px;
                          text-align: center;
                          font-size: 10px;
                          text-decoration: line-through;
                        }
                      }
                    }
                  }

                  .ntiText {
                    width: 156.6px;
                    height: 42px;
                    position: absolute;
                    top: 10px;
                    left: 15px;

                    .ntiTitle {
                      height: 24px;
                      line-height: 24px;
                      font-size: 16px;
                    }

                    .ntiDes {
                      height: 18px;
                      line-height: 18px;
                      font-size: 12px;
                      color: #aaa;
                    }

                    .ntipost {
                      width: 40px;
                      height: 16px;
                      line-height: 16px;
                      padding: 0 5px;
                      background-color: rgba(191, 189, 186, 0.8);
                      color: #fff;
                      font-size: 8px;
                    }
                  }
                }
              }
            }
          }

          .placard {
            height: 355px;
            margin-bottom: 10px;

            .pcTitle {
              height: 50px;
              line-height: 50px;
              font-size: 18px;
              padding: 0 15px;
            }

            .plGoods {
              height: 305px;
              padding: 0 10px 10px 15px;

              .line1 {
                height: 100px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 5px;

                .left {
                  background-color: #f9f3e4;
                }

                .right {
                  background-color: #ebeff6;
                }

                .line1Item {
                  width: 170px;
                  height: 100px;
                  margin: 0 5px 5px 0;
                  position: relative;

                  .liName {
                    height: 21px;
                    line-height: 21px;
                    padding-left: 12px;
                    margin-top: 33px;
                    font-size: 15px;
                    position: relative;
                  }

                  .liLine {
                    height: 2px;
                    width: 22px;
                    border-bottom: 1px solid black;
                    position: absolute;
                    left: 14px;
                    bottom: 38px;
                  }

                  .liImg {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    top: 0;
                    right: 0;

                    .liiPic {
                      width: 100px;
                      height: 100px;
                    }
                  }
                }
              }

              .line2 {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                .line2Item {
                  flex-shrink: 0;
                  width: 82.5px;
                  height: 90px;
                  margin: 0 5px 5px 0;
                  background-color: #d4d0d0;
                  display: flex;
                  flex-direction: column;
                  align-items: center;

                  .title {
                    height: 18px;
                    line-height: 18px;
                    margin-top: 5px;
                    font-size: 12px;
                  }

                  .img {
                    height: 60px;
                    width: 60px;
                    margin-left: 1px 0 0 15px;

                    .pic {
                      height: 100%;
                      width: 100%px;
                    }
                  }
                }
              }
            }
          }

          .goodsList {

            // width: 100%;
            .title {
              margin: 0 0 10px 10px;
              font-size: 18px;
              font-weight: bold;
            }

            .goods {
              width: 100%;
              display: flex;
              flex-wrap: wrap;

              .goodsItem {
                width: 45%;
                height: 276.5px;
                margin: 0 5px 26px 10px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .goodsImg {
                  width: 100%;

                  .goodsPic {
                    width: 100%;
                    height: 172.5px;
                  }
                }

                .goodsName {
                  height: 40px;
                  margin-top: 6px;
                  line-height: 20px;
                  font-size: 14px;

                  .nameImg {
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                  }
                }

                .goodsPrice {
                  height: 30px;
                  display: flex;
                  color: red;

                  .Price {
                    font-size: 20px;
                  }

                  .PriceImg {
                    font-size: 14px;
                  }

                  .PriceOutAll {
                    font-size: 12px;
                    color: #c6c1c1;

                    .PriceOut {
                      text-decoration: line-through;
                    }
                  }
                }

                .SaleList {
                  height: 23px;
                  margin-top: 5px;

                  .slBox {
                    height: 23px;

                    .SaleText {
                      width: 64.25px;
                      height: 19px;
                      padding: 2px 6px;
                      line-height: 19px;
                      text-align: center;
                      font-size: 10px;
                      background-color: red;
                      color: #fff;
                      border-radius: 15px;
                    }
                  }

                  .SaleItem {
                    width: 100%;
                    height: 23px;
                    // display: felx;
                    border-radius: 10px;

                    .siContent {
                      width: 100%;
                      display: flex;
                      border-radius: 10px;
                      background-color: #ffe9eb;

                      .SaleName {
                        height: 19px;
                        line-height: 19px;
                        text-align: center;
                        font-size: 8px;
                        background-color: red;
                        color: #fff;
                        border-radius: 10px;
                      }

                      .SiText {
                        width: 45.56px;
                        height: 19px;
                        line-height: 19px;
                        text-align: center;
                        font-size: 8px;
                        color: red;
                      }
                    }

                  }
                }
              }
            }
          }
        }

        .every {
          .headPic {
            height: 148px;

            .headImg {
              height: 148px;
              width: 100%;
            }
          }

          .goodsDepart {
            width: 100%;

            .gdItem {
              display: flex;
              flex-wrap: wrap;

              .gdiTitle {
                width: 100%;
                height: 60px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;

                .Bigtitle {
                  width: 100%;
                  height: 16px;
                  line-height: 16px;
                  text-align: center;
                  font-size: 16px;
                }

                .littleTitle {
                  width: 100%;
                  height: 12px;
                  line-height: 12px;
                  text-align: center;
                  font-size: 12px;
                  margin-top: -10px;
                  color: #d4d0d0;
                }


              }

              .goodsContant {
                width: 100%;

                .goods {
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: space-around;

                  .goodsItem {
                    width: 50%;
                    height: 302.5px;
                    padding: 0 5px 26px 10px;
                    box-sizing: border-box;

                    .goodsImg {
                      height: 172.5px;
                      width: 100%;

                      .goodsPic {
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                      }
                    }

                    .goodsName {
                      height: 40px;
                      margin-top: 6px;
                      line-height: 20px;
                      font-size: 14px;

                      .nameImg {
                        width: 15px;
                        height: 15px;
                        margin-right: 5px;
                      }
                    }

                    .goodsPrice {
                      height: 30px;
                      display: flex;
                      color: red;

                      .Price {
                        font-size: 20px;
                      }

                      .PriceImg {
                        font-size: 14px;
                      }

                      .PriceOutAll {
                        font-size: 12px;
                        color: #c6c1c1;

                        .PriceOut {
                          text-decoration: line-through;
                        }
                      }
                    }

                    .SaleList {
                      height: 23px;
                      margin-top: 5px;

                      .slBox {
                        height: 23px;

                        .SaleText {
                          width: 64.25px;
                          height: 19px;
                          padding: 2px 6px;
                          line-height: 19px;
                          text-align: center;
                          font-size: 10px;
                          background-color: red;
                          color: #fff;
                          border-radius: 15px;
                        }
                      }

                      .SaleItem {
                        width: 100%;
                        height: 23px;
                        // display: felx;
                        border-radius: 10px;

                        .siContent {
                          width: 100%;
                          display: flex;
                          border-radius: 10px;
                          background-color: #ffe9eb;

                          .SaleName {
                            height: 19px;
                            line-height: 19px;
                            text-align: center;
                            font-size: 8px;
                            background-color: red;
                            color: #fff;
                            border-radius: 10px;
                          }

                          .SiText {
                            height: 19px;
                            line-height: 19px;
                            text-align: center;
                            font-size: 8px;
                            color: red;
                          }
                        }

                      }
                    }
                  }

                  &::after {
                    content: '';
                    width: 50%;
                  }
                }
              }
            }

          }
        }
      }

      .reContaint {
        position: absolute;
        left: 0;
        top: 0;
      }

      .updownIcont {
        position: absolute;
        width: 40px;
        bottom: 0;
        right: 0;
        line-height: 30px;
        background-color: #ffffffec;
        text-align: center;
        z-index: 99;

        .allKinds {
          margin-left: calc(100vw - 50px)
        }

        .van-icon {
          width: 15px;
          height: 15px;
          line-height: 15px;
          z-index: 9999;
          font-size: 16px;
        }
      }

      .updownList {
        width: 100%;
        position: absolute;
        top: 35px;
        left: 0;
        background-color: #fff;
        padding-top: 12px;

        .udList {
          flex-shrink: 0;
          display: flex;
          flex-wrap: wrap;
          // justify-content: space-around;

          li {
            margin-left: 15px;
            margin-bottom: 20px;
            width: 20%;
            height: 28px;
            margin-left: 15px;
            margin-bottom: 20px;

            button {
              width: 100%;
              height: 100%;
              line-height: 100%;
              text-align: center;
              font-size: 14px;
            }
          }
        }



        .btnActive {
          color: red;
        }
      }
    }
  }
}
</style>
